<template>
  <view class="user-order-bar">
    <view
      class="order-item"
      @click="navigateToOrder('ALL')"
    >
      <v-icon
        size="52rpx"
        src="@/static/icons/index-my-orders.svg"
      />
      <view class="order-text">
        我的订单
      </view>
    </view>
    <view
      class="order-item"
      @click="navigateToOrder('UNPAID')"
    >
      <v-icon
        size="52rpx"
        src="@/static/icons/index-pending-payment.svg"
      />
      <view class="order-text">
        待付款
      </view>
    </view>
    <view
      class="order-item"
      @click="navigateToOrder('UNSHIPPED')"
    >
      <v-icon
        size="52rpx"
        src="@/static/icons/index-pending-shipment.svg"
      />
      <view class="order-text">
        待发货
      </view>
    </view>
    <view
      class="order-item"
      @click="navigateToOrder('SHIPPED')"
    >
      <v-icon
        size="52rpx"
        src="@/static/icons/index-pending-receipt.svg"
      />
      <view class="order-text">
        待收货
      </view>
    </view>
    <view
      class="order-item"
      @click="navigateToOrder('AFTERSALES')"
    >
      <v-icon
        size="52rpx"
        src="@/static/icons/index-after-sales.svg"
      />
      <view class="order-text">
        售后
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const navigateToOrder = (status: string) => {
  uni.navigateTo({ url: `/pages/order/order-page?status=${status}` });
};
</script>

<style lang="scss" scoped>
.user-order-bar {
  background-color: white;
  height: 134rpx;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 24rpx;
  margin: 0 24rpx 20rpx;
  border-radius: 16rpx;
  .order-item {
    width: 110rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .order-text {
      margin-top: 12rpx;
      font-size: 24rpx;
    }
  }
}
</style>
